<template>
<view class="goodsBox flex flex-row">
  <view class="imageBox">
    <image :src="goods.image" />
  </view>
  <view class="content">
    <span class="redDot" v-if="goods.giftPromotionInfoList">促</span>
    <view class="goodsName">{{ goods.goodsName }}</view>
    <view class="flex flex-row">
      <view class="num fl1">{{ goods.boxNum }}{{ goods.boxUnitName }}{{ goods.mainNum }}{{ goods.mainUnitName}}</view>
      <view class="priceBox fl1">
        <view><span class="price">{{ (goods.billTaxAmount || goods.taxAmount).toFixed(2) }}</span></view>
      </view>
    </view>
  </view>
  <view>
  </view>
</view>
</template>

<script>

export default {
  name: "settlementGoods",
  props:{
    goods:{
      type:Object,
      default: {}
    }
  }
}
</script>

<style lang="scss" scoped>
.goodsBox{
  padding-bottom:50rpx;
  .imageBox{
    width: 35%;
    padding-left: 20rpx;
    margin-right: 20rpx;
    image{
      width: 180rpx;
      height: 180rpx;
      border-radius: 20rpx;
    }
  }
  .content{
    width: 60%;
    position: relative;
    .num{
      color:#8E8E93;
      font-size: 26rpx;
    }
    .goodsName{
      font-size: 30rpx;

      min-height: 120rpx;
    }
    .priceBox {
      font-size: 25rpx;
      font-family: PingFang SC;
      .price {
        &:before {
          content: '￥';
          font-size: 35rpx;
          font-weight: 500;
        }
        color: red;
        font-size: 40rpx;
        font-weight: 600;
      }
    }
  }
}
.redDot{
  background: red;
  border: red 1px solid;
  display: flex;
  justify-content: center;
  border-radius: 30rpx;
  width: 30rpx;
  height: 30rpx;
  color: #ffffff;
  font-size: 20rpx;
  font-weight: lighter;
  position: absolute;
  right: 0;
  top: 10rpx;

}
</style>
